<template>
  <div class="stats-cards">
    <!-- 调整后的收支概况卡片（作为主卡片） -->
    <el-card shadow="hover" class="stat-card overview-card">
      <div class="card-content">
        <div class="card-header">
          <div class="card-title">收支概况</div>
        </div>

        <div class="overview-stats">
          <div class="overview-item income">
            <div class="overview-label">总收入</div>
            <div class="overview-value">¥ {{ totalIncome }}</div>
            <div class="overview-change">
              <div class="overview-card-details">
                <div class="detail-item">
                  <span class="detail-label">同比</span>
                  <span class="detail-value" :class="getChangeClass(totalIncomeYoy)">   {{
                      Math.abs(totalIncomeYoy)
                    }}%</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">环比</span>
                  <span class="detail-value" :class="getChangeClass(totalIncomeMoM)">   {{
                      Math.abs(totalIncomeMoM)
                    }}%</span>
                </div>
              </div>
            </div>
          </div>

          <div class="overview-item expense">
            <div class="overview-label">总支出</div>
            <div class="overview-value">¥ {{ totalExpense }}</div>
            <div class="overview-change">
              <div class="overview-card-details">
                <div class="detail-item">
                  <span class="detail-label">同比</span>
                  <span class="detail-value" :class="getChangeClass(totalExpenseYoy)"> {{
                      Math.abs(totalExpenseYoy)
                    }}%</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">环比</span>
                  <span class="detail-value" :class="getChangeClass(totalExpenseMoM)"> {{
                      Math.abs(totalExpenseMoM)
                    }}%</span>
                </div>
              </div>
            </div>
          </div>

          <div class="overview-item balance">
            <div class="overview-label">总结余</div>
            <div class="overview-value">¥ {{ totalBalance }}</div>
            <div class="overview-change">

              <div class="overview-card-details">
                <div class="detail-item">
                  <span class="detail-label">同比</span>
                  <span class="detail-value" :class="getChangeClass(totalBalanceYoy)"> {{
                      Math.abs(totalBalanceYoy)
                    }}%</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">环比</span>
                  <span class="detail-value" :class="getChangeClass(totalBalanceMoM)"> {{
                      Math.abs(totalBalanceMoM)
                    }}%</span>
                </div>
              </div>
            </div>
          </div>

          <div class="overview-item average-personal-income">
            <div class="overview-label">平均成员收入</div>
            <div class="overview-value">¥ {{ perAveIncome }}</div>
            <div class="overview-change">
              <div class="overview-card-details">
                <div class="detail-item">
                  <span class="detail-label">同比</span>
                  <span class="detail-value" :class="getChangeClass(perAveIncomeYoy)">{{
                      Math.abs(perAveIncomeYoy)
                    }}%</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">环比</span>
                  <span class="detail-value" :class="getChangeClass(perAveIncomeMoM)">{{
                      Math.abs(perAveIncomeMoM)
                    }}%</span>
                </div>
              </div>
            </div>
          </div>

          <div class="overview-item average-personal-expense">
            <div class="overview-label">平均成员支出</div>
            <div class="overview-value">¥ {{ perAveExpense }}</div>
            <div class="overview-change">
              <div class="overview-card-details">
                <div class="detail-item">
                  <span class="detail-label">同比</span>
                  <span class="detail-value" :class="getChangeClass(perAveExpenseYoy)"> {{
                      Math.abs(perAveExpenseYoy)
                    }}%</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">环比</span>
                  <span class="detail-value" :class="getChangeClass(perAveExpenseMoM)"> {{
                      Math.abs(perAveExpenseMoM)
                    }}%</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>


    <!-- 平均收支 -->
    <el-card shadow="hover" class="stat-card average-card">
      <div class="card-content">
        <div class="card-icon">
          <el-icon class="icon-bg">
            <DataAnalysis/>
          </el-icon>
        </div>
        <div class="card-text">
          <div class="card-title">日均收支</div>
          <div class="card-value">¥ {{ balanceAvg }}</div>
          <div class="card-compare">
            <span :class="['compare-text', balanceAvg >= 0 ? 'positive' : 'negative']">
              <el-icon :class="balanceAvg >= 0 ? 'top' : 'bottom'">
                <TrendCharts/>
              </el-icon>
                 <span class="compare-label">同比</span>
              {{ Math.abs(balanceYoy) }}%

            </span>
            <span :class="['compare-text', balanceAvg >= 0 ? 'positive' : 'negative']">
              <el-icon :class="balanceAvg >= 0 ? 'top' : 'bottom'">
                <TrendCharts/>
              </el-icon>
                  <span class="compare-label">环比</span>
              {{ Math.abs(balanceMom) }}%

            </span>
          </div>
          <div class="card-details">
            <div class="detail-item">
              <span class="detail-label">日均收入</span>
              <span class="detail-value">¥ {{ incomeAvg }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">日均支出</span>
              <span class="detail-value">¥ {{ expenseAvg }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 记录总数 -->
    <el-card shadow="hover" class="stat-card extreme-card">
      <div class="card-content">
        <div class="card-icon">
          <el-icon class="icon-bg">
            <TrendCharts/>
          </el-icon>
        </div>
        <div class="card-text">
          <div class="card-title">记录总数</div>
          <div class="card-value">{{ totalCount }}条</div>
          <div class="card-details">
            <div class="detail-item">
              <span class="detail-label">收入记录</span>
              <span class="detail-value"> {{ incomeCount }}条</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">支出记录</span>
              <span class="detail-value">{{ expenseCount }}条</span>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import {DataAnalysis, TrendCharts} from '@element-plus/icons-vue'
import {computed} from 'vue'
import type {DailyData, OverviewData, Records} from "@/api/statistics/type.ts";

const props = defineProps<{
  overviewData: OverviewData,
  dailyData: DailyData,
  records: Records,
}>()

//总收入
const totalIncome = computed(() => props.overviewData?.incomeTotal.amount)
const totalIncomeYoy = computed(() => props.overviewData?.incomeTotal.yoy)
const totalIncomeMoM = computed(() => props.overviewData?.incomeTotal.mom)

//总支出
const totalExpense = computed(() => props.overviewData?.expenseTotal.amount)
const totalExpenseYoy = computed(() => props.overviewData?.expenseTotal.yoy)
const totalExpenseMoM = computed(() => props.overviewData?.expenseTotal.mom)

//总结余
const totalBalance = computed(() => props.overviewData?.balanceTotal.amount)
const totalBalanceYoy = computed(() => props.overviewData?.balanceTotal.yoy)
const totalBalanceMoM = computed(() => props.overviewData?.balanceTotal.mom)

//个人平均收入
const perAveIncome = computed(() => props.overviewData?.perAveIncome.amount)
const perAveIncomeYoy = computed(() => props.overviewData?.perAveIncome.yoy)
const perAveIncomeMoM = computed(() => props.overviewData?.perAveIncome.mom)
//个人平均支出
const perAveExpense = computed(() => props.overviewData?.perAveExpense.amount)
const perAveExpenseYoy = computed(() => props.overviewData?.perAveExpense.yoy)
const perAveExpenseMoM = computed(() => props.overviewData?.perAveExpense.mom)


//日均数据
//日均收入
const incomeAvg = computed(() => props.dailyData?.income || 0)
//日均支出
const expenseAvg = computed(() => props.dailyData?.expense || 0)
//日均结余
const balanceAvg = computed(() => props.dailyData?.balance || 0)
//日均结余同比
const balanceYoy = computed(() => props.dailyData?.balanceYoy || 0)
//日均结余环比
const balanceMom = computed(() => props.dailyData?.balanceMom || 0)

//数量
const totalCount = computed(() => props.records?.totalCount || 0)
//数量同比
const incomeCount = computed(() => props.records?.incomeCount || 0)
//数量环比
const expenseCount = computed(() => props.records?.expenseCount || 0)

const getChangeClass = (change: number) => {
  return change >= 0 ? 'positive' : 'negative'
}
</script>

<style scoped lang="scss">
.stats-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;

  .stat-card {
    border-radius: 8px;
    border: none;
    height: 100%;

    &.overview-card {
      grid-column: span 2;


      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;

        .card-title {
          font-size: 16px;
          font-weight: bold;
          color: var(--el-text-color-primary);
          margin-right: 20px;
        }


      }

      .overview-stats {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 40px;
        cursor: pointer;

        .overview-item {
          padding: 15px;
          border-radius: 8px;
          box-shadow: 12px 12px 12px 12px rgba(0, 0, 0, 0.15);

          &.income {
            border-top: 3px solid #67C23A;
            border-bottom: 3px solid #67C23A;
          }

          &.expense {
            border-top: 3px solid #F56C6C;
            border-bottom: 3px solid #F56C6C;
          }

          &.balance {
            border-top: 3px solid #409EFF;
            border-bottom: 3px solid #409EFF;
          }

          &.average-personal-income {
            border-top: 3px solid #4bcabd;
            border-bottom: 3px solid #4bcabd;
          }

          &.average-personal-expense {
            border-top: 3px solid #6467b6;
            border-bottom: 3px solid #6467b6;
          }

          .overview-card-details {
            .detail-item {
              display: grid;
              grid-template-columns: repeat(2, 1fr);
              gap: 40px;
              font-size: 12px;
              margin-bottom: 5px;

              .detail-label {
                color: var(--el-text-color-secondary);
              }

              .detail-value {
                font-weight: 500;

                &.positive {
                  color: #67C23A;
                }

                &.negative {
                  color: #F56C6C;
                }
              }
            }
          }

          .overview-label {
            font-size: 14px;
            color: var(--el-text-color-secondary);
            margin-bottom: 5px;
          }

          .overview-value {
            font-size: 22px;
            font-weight: bold;
            margin-bottom: 5px;
          }

          .overview-change {
            display: inline-flex;
            align-items: center;
            font-size: 12px;

            &.positive {
              color: #67C23A;
            }

            &.negative {
              color: #F56C6C;
            }

            .el-icon {
              margin-right: 3px;

              &.top {
                color: #67C23A;
              }

              &.bottom {
                color: #F56C6C;
              }
            }
          }
        }
      }
    }

    .card-content {
      display: flex;
      height: 100%;

      .card-icon {
        margin-right: 15px;
        display: flex;
        align-items: center;

        .icon-bg {
          font-size: 24px;
          padding: 15px;
          border-radius: 50%;
          background-color: rgba(64, 158, 255, 0.1);
          color: #409EFF;
        }
      }

      .card-text {
        flex: 1;

        .card-title {
          font-size: 16px;
          color: var(--el-text-color-secondary);
          margin-bottom: 10px;
        }

        .card-value {
          font-size: 24px;
          font-weight: bold;
          color: var(--el-text-color-primary);
          margin-bottom: 5px;
        }

        .card-compare {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 12px;
          margin-bottom: 10px;

          .compare-text {
            display: inline-flex;
            align-items: center;
            margin-right: 5px;

            &.positive {
              color: #67C23A;
            }

            &.negative {
              color: #F56C6C;
            }

            .el-icon {
              font-size: 12px;
              margin-right: 2px;
            }
          }

          .compare-label {
            color: var(--el-text-color-secondary);
            display: inline-block;
            margin-right: 5px
          }
        }

        .card-details {
          .detail-item {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            margin-bottom: 5px;

            .detail-label {
              color: var(--el-text-color-secondary);

            }

            .detail-value {
              color: var(--el-text-color-primary);
              font-weight: 500;
            }
          }
        }
      }
    }

    &.records-card {
      .icon-bg {
        background-color: rgba(103, 194, 58, 0.1) !important;
        color: #67C23A !important;
      }
    }

    &.average-card {
      .icon-bg {
        background-color: rgba(230, 162, 60, 0.1) !important;
        color: #E6A23C !important;
      }
    }

    &.extreme-card {
      .icon-bg {
        background-color: rgba(245, 108, 108, 0.1) !important;
        color: #F56C6C !important;
      }
    }
  }
}

@media (max-width: 1200px) {
  .stats-cards {
    grid-template-columns: repeat(2, 1fr) !important;

    .stat-card.overview-card {
      grid-column: span 2;
    }

    .card-header.card-title {
      font-size: 12px;
    }
  }

}

@media (max-width: 768px) {
  .stats-cards {
    grid-template-columns: 1fr !important;

    .stat-card.overview-card {
      grid-column: span 1;

      .overview-stats {
        grid-template-columns: 1fr !important;
      }
    }

    .card-header.card-title {
      font-size: 12px;
    }
  }
}
</style>
